<template>
    <el-dialog title="文章详情" :visible="dialogFormVisible" :modal="modal" :show-close="modal">
        <el-form :model="article">
            <el-form-item label="文章编号" :label-width="formLabelWidth">
                <el-input v-model="article.id" autocomplete="off" :disabled="idTimeDisabled"></el-input>
            </el-form-item>
            <el-form-item label="文章标题" :label-width="formLabelWidth">
                <el-input v-model="article.title" autocomplete="off" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="文章图片" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="http://127.0.0.1:9094/article/uploadImage"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload" :disabled="disabled">
                    <img v-if="article.images" :src="article.images" class="avatar" >
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
                <el-input v-model="article.createDate" autocomplete="off" :disabled="idTimeDisabled"></el-input>
            </el-form-item>
            <el-form-item label="系列" :label-width="formLabelWidth">
                <el-select v-model="region" filterable placeholder="请选择搜索的系列" :filter-method="init"
                           :disabled="disabled">
                    <el-option
                            v-for="item in seriesList"
                            :key="item.number"
                            :label="item.name"
                            :value="item.number">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文本内容" :label-width="formLabelWidth">
                <el-input v-model="article.content" autocomplete="off" :disabled="disabled"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {mapActions} from "vuex"
    import {Article} from "@/assets/script/model";
    import tips from "@/assets/script/util/tips";
    import message from "../../../assets/script/util/message";

    export default {
        name: "ArticleDialog",
        props: {
            dialogFormVisible: Boolean,
            disabled: Boolean,
            id: String
        },
        data() {
            return {
                idTimeDisabled: true,
                formLabelWidth: '120px',
                article: new Article(),
                region: '',
                seriesList: [],
                modal: false,
                img: ""
            }
        },
        watch: {
            id(value) {
                this.init(value)
            }
        },
        methods: {
            ...mapActions("article", ["AGet", "ASave", "AUpdate", "ARemoveImage"]),
            ...mapActions("series", ["AListAll"]),
            async init(id) {
                console.log(this.dialogVisible)
                const seriesResult = await this.AListAll();
                if (seriesResult.status === 200) {
                    this.seriesList = seriesResult.data
                } else {
                    await tips.error(seriesResult.message);
                }
                if (id !== "YuWebStorm") {
                    const result = await this.AGet({id});
                    if (result.status === 200) {
                        this.article = result.data;
                        const list = seriesResult.data;
                        const a = list.filter(it => it.name === this.article.series)[0];
                        this.region = a.number
                    }
                } else {
                    this.article = new Article()
                }
            },
            async save() {
                if (!this.disabled) {
                    if (this.id === "YuWebStorm") {
                        //新增
                        const param = {
                            "title": this.article.title,
                            "images": this.article.images,
                            "content": this.article.content,
                            "series": this.region
                        }
                        const result = await this.ASave(param)
                        await this.showMessage(result, "添加成功")
                    } else {
                        //修改
                        this.article.series = this.region
                        const result = await this.AUpdate(this.article)
                        await this.showMessage(result, "修改成功")
                    }
                }
                await this.close()
            },
            async showMessage(result, title) {
                if (result.status === 200) {
                    message.messageSuccessAlert(title)
                } else {
                    message.messageErrorAlert(result.message)
                }
            },
            async close() {
                this.region = null
                if (this.id === "YuWebStorm") {
                    if (this.img !== null) {
                        this.ARemoveImage({"fileUrl": this.img})
                    }
                } else {
                    const result = this.AGet({"id": this.id})
                    if (result.status === 200) {
                        const data = result.data
                        if (data.images !== this.img) {
                            this.ARemoveImage({"fileUrl": this.img})
                        }
                    }
                }
                this.img = ""
                await this.$emit("update:dialogFormVisible", false);
            },
            handleAvatarSuccess(res, file) {
                this.article.images = file.response.data
                this.img = file.response.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped type="text/css">
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>